<template>
  <page-frame>
    <div class="staff-main addTeamMember" style="vertical-align: top">
      <div class="toptitle">
        <div class="left" v-model="title">{{title}}</div>
        <div class="right">
          <div class="btns">
            <el-button  class="lightGreenBtn" @click="editMember" v-show="isAdd && isSave">保存</el-button>
            <el-button  class="lightGreenBtn" @click="editMember" v-show="!isAdd">保存修改</el-button>
            <el-button @click="back">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="">
        <!--<div class="order-content" v-show="false">-->
          <!--<div class="container">-->
            <!--<el-row :gutter="20" >-->
              <!--<el-col :span="7">-->
                <!--<div class="input-item">-->
                  <!--<label>团队名称</label>-->
                  <!--<el-input-->
                    <!--width="100"-->
                    <!--placeholder="请输入团队名称"-->
                    <!--disabled-->
                    <!--class="teamDetailInput"-->
                    <!--v-model="submitData.tmName">-->
                  <!--</el-input>-->
                <!--</div>-->
              <!--</el-col>-->
              <!--<el-col :span="6">-->
                <!--<div class="input-item">-->
                  <!--<label>负责人</label>-->
                  <!--<el-input-->
                    <!--width="100"-->
                    <!--v-model="teamQueryResponseDTO.dutyPerson"-->
                    <!--placeholder="请选择负责人名称"-->
                    <!--disabled-->
                    <!--class="teamDetailInput">-->
                  <!--</el-input>-->
                <!--</div>-->
              <!--</el-col>-->
              <!--<el-col :span="6">-->
                <!--<div class="input-item">-->
                  <!--<label>服务类型</label>-->
                  <!--<el-select placeholder="服务类型" multiple disabled v-model="teamQueryResponseDTO.type">-->
                    <!--<el-option-->
                      <!--v-for="item in serviceTypes"-->
                      <!--:label="item.typeName"-->
                      <!--:value="item.typeId">-->
                    <!--</el-option>-->
                  <!--</el-select>-->
                <!--</div>-->
              <!--</el-col>-->
            <!--</el-row>-->
            <!--&lt;!&ndash;成员管理&ndash;&gt;-->
            <!--<el-row>-->
              <!--<div>-->
                <!--<el-row :gutter="20" class="teamDetailTitle" style="margin-top:20px;">-->
                  <!--<label >成员管理</label>-->
                  <!--<el-button  class="fRight lightGreenBtn" :disabled="isClick" @click="getEmpByEmpName">新增/修改团队</el-button>-->
                <!--</el-row>-->
                <!--<el-table-->
                  <!--:data="chooseStaff"-->
                  <!--border-->
                  <!--style="width: 100%">-->
                  <!--<el-table-column-->
                    <!--prop="emName"-->
                    <!--label="员工姓名"-->
                    <!--width="">-->
                  <!--</el-table-column>-->
                  <!--<el-table-column-->
                    <!--prop="phone"-->
                    <!--label="手机号"-->
                    <!--width="">-->
                  <!--</el-table-column>-->
                  <!--<el-table-column-->
                    <!--prop="dept"-->
                    <!--label="服务类型">-->
                  <!--</el-table-column>-->
                  <!--<el-table-column-->
                    <!--prop="role"-->
                    <!--label="角色">-->
                  <!--</el-table-column>-->
                  <!--<el-table-column-->
                    <!--label="操作"-->
                    <!--width="100">-->
                    <!--<template scope="scope" >-->
                      <!--<el-button type="text" size="small" v-if="!scope.row.isRole" @click="delStaff(scope.row.emId,scope.$index)">删除</el-button>-->
                    <!--</template>-->
                  <!--</el-table-column>-->
                <!--</el-table>-->
              <!--</div>-->
            <!--</el-row>-->
          <!--</div>-->
        <!--</div>-->

        <div class="order-content2">
          <el-form label-position="right" label-width="85px">
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="团队名称">
                  <el-input
                    placeholder="请输入团队名称"
                    class="teamDetailInput"
                    :disabled="isEditStaff && isEditTeam"
                    v-model="submitData.tmName">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2" style="height: 1px;"></el-col>
              <el-col :span="10">
                <el-form-item label="服务类型">
                  <el-select placeholder="服务类型" multiple :disabled="isEditStaff && isEditTeam" v-model="submitData.type">
                    <el-option
                      v-for="item in serviceTypes"
                      :label="item.typeName"

                      :value="item.typeId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
                <el-col :span="10">
                  <el-form-item label="工作描述">
                    <el-input type="textarea" v-model="submitData.teamDesc" :disabled="isEditStaff && isEditTeam" placeholder="请输入团队描述"></el-input>
                  </el-form-item>
                </el-col>
              <el-col :span="16">
                <el-form-item label="团队成员">
                  <div class="teamMember">
                    <div class="all fLeft">
                      <div class="input-item">
                        <el-input
                          placeholder="查询员工姓名"
                          class="staffNameInput"
                          v-model="staffName.empName">
                        </el-input>
                      </div>
                      <div class="allName">
                        <div v-for="(item,index) in allStaff" @click="choose(item,index)" >{{item.emName}} ({{item.dept}})</div>
                      </div>
                    </div>
                    <div class="choose fRight">
                      <div class="chooseName">已选择</div>
                      <div class="Item">
                        <div v-for="(item, index) in chooseStaff">
                          {{item.emName}}({{item.dept}})
                          <span v-show="isSave" @click="delStaff(item, index)" style="float: right"><i class="el-icon-close"></i></span>
                        </div>
                      </div>
                    </div>
                    <div class="clear"></div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="负责人">
                  <el-select v-model="submitData.dutyPersonEmpId" :disabled="isEditStaff && isEditTeam"  placeholder="负责人">
                    <el-option
                      v-for="item in chooseStaff"
                      :label="item.emName"
                      :value="item.emId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10" v-show="isEditStaff">
                <el-form-item label="床位分配">
                  <el-button type="primary" size="small" @click="addBed">选择床位</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-table
                :data="bedTableData"
                border
                v-show="isEditStaff"
                style="width: 90%;margin-left: 85px;">
                <el-table-column
                  prop="blName"
                  label="建筑"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="flName"
                  label="楼层"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="rmName"
                  label="房间"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="bedNo"
                  label="床位"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="memberName"
                  label="会员">
                </el-table-column>
                <el-table-column
                  prop="lName"
                  label="照护等级">
                </el-table-column>
                <el-table-column
                  prop="dutyPersonString"
                  label="负责员工">
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="80"
                >
                  <template scope="scope">
                    <el-button type="text" size="small" @click="delBed(scope.row.bedId)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
        </div>
      </div>
      <!--遮罩层-->
      <div class="v-modal" style="z-index:9" v-show="modal" @click="modal=false,addBedDialog=false"></div>
      <!--新增床位弹框-->
      <div class="bed" v-show="addBedDialog">
        <div>
          <div class="dialog-title-teambed">
            请选择床位负责人
          </div>
          <div class="input-item item room" style="text-align: left;">
            <label class="belongRoom">所属房间</label>
            <el-cascader
              :options="bedList"
              v-model="bedPos"
            >
            </el-cascader>
          </div>
          <!--<div class="input-item item" style="width:170px;margin-left: 93px;">-->
          <!--请选择组员负责的床位-->
          <!--</div>-->
          <div class="input-item item room-bed">
            <el-card class="box-card" v-for="bed in bedInfo">
              <p style="margin-top:20px;">
                <label class="labelName">会员姓名:</label>
                <span class="name">{{bed.memberName}}</span>
              </p>
              <p>
                <label  class="labelName">照护等级:</label>
                <span class="name">{{bed.lName}}</span>
              </p>
              <p>
                <label  class="labelName">床位编号:</label>
                <span class="name">{{bed.bedNo}}</span>
              </p>
              <p class="principe">
                <label class="labelName">负责人:</label>
                <el-select v-model="bed.emIds" size="mini" multiple placeholder="请选择">
                  <el-option
                    v-for="item in empList"
                    :label="item.emName"
                    :value="item.emId">
                  </el-option>
                </el-select>
              </p>
            </el-card>
          </div>
          <div class="input-item item" v-bind:class="[bedInfo.length<4 ? saveDisBlock : saveBlock]">
            <el-button class="lightGreenBtn dialog-confirm-btn" @click="submitDutyPerson">确定</el-button>
          </div>
        </div>
      </div>

    </div>
  </page-frame>
</template>


<script>
  import teamApi from '../../service/corporation/teamApi';
  import commonJs from '../../config/common';
  import {CONSTANT_TEAM_TYPE_OPTION} from '../../config/constant';
  export default {
    data() {
      return {
        way:null,
        saveDisBlock:'saveDisBlock',
        saveBlock:'saveBlock',
        CONSTANT_TEAM_TYPE_OPTION,
        currentTeamId:0,
        title:"新增团队",
        operateBool:true,
        serviceTypes:[],
        isAdd:false,
        addStaff:false,
        isClick:false,
        isEditStaff:false,
        isEditTeam:false,
        modal:false,
        isSave:true,
        staffName:{
          empName: ""
        },
        addBedDialog:false,
        submitData:{
          dutyPersonEmpId: "",
          insertTeamEmpIdList: [],
          teamDesc:"",
          tmName: "",
          type:[],
        },
        allStaff:[],
        chooseStaff:[],
//        bedList: [
//          {
//            "bedId": 1,
//            "bedNo": "001",
//            "blName": "一号楼",
//            "flName": "string",
//            "lId": 11,
//            "memberId":11,
//            "memberName": "王楠",
//            "rmName": "string"
//          },
//          {
//            "bedId": 2,
//            "bedNo": "002",
//            "blName": "二号楼",
//            "flName": "string",
//            "lId": 0,
//            "memberId": 0,
//            "memberName": "李小龙",
//            "rmName": "string"
//          }
//        ],
        bedTableData:[],
        bedList: [],
        empList: [],
        teamQueryResponseDTO: {
          "bedNumber": 0,
          "dutyPerson": "",
          "dutyPersonEmId": 0,
          "memberNumber": 0,
          "tmDescription": "",
          "tmId": 0,
          "tmMemberNumber": 0,
          "tmName": ""
        },
        TeamEditTeamAndEmpRequestDTO:{
          formerDutyPersonEmId: 0,
          insertEmpIdList: [
          ],
          insertTeamEmpIdList:[],
          newDutyPersonEmId: 0,
          teamDesc:"",
          tmId: 0,
          tmName: ""
        },
        bedInfo:[],
        bedPos:[],
      }
    },
    methods: {
      init(){
        let self = this;
        this.getAllTeamServiceType();
        self.currentTeamId = self.$route.params.teamId;
//        self.addStaff = true;
        if(this.$route.params.way == 1){//增加
          this.isAdd = true;
          this.title = "新增团队";
          this.getEmpByEmpName();
        }else if(this.$route.params.way == 2){//修改
          this.isAdd = false;
          this.isEditStaff = true;
          this.isEditTeam = false;
          this.title = "修改团队";
          this.getTeamByTeam();
          this.getEmpByEmpName();
        };
        this.way = this.$route.params.way
      },
      //获得可添加员工信息
      getEmpByEmpName(){
        let self = this;
        self.addStaff=true;
        teamApi.getEmpByEmpName(self.staffName).then(
          function(response){
            self.allStaff =  response.body.data;
          },function(){}
        )
      },
      /**
       * 获取所有团队服务类型
       **/
      getAllTeamServiceType() {
        let self = this;
        teamApi.getAllTeamServiceType().then(function(response){
          self.serviceTypes = response.data.data;
        })
      },
      //添加或修改床位
      addBed(){
        let self = this;
        self.addBedDialog = true;
        self.modal = true;
        self.getBedList();
      },
      //修改床位
      editBed(){

      },
      //获取房间级联选择器下拉菜单
      getBedList(){
        let self = this;
        teamApi.getStructureBedroomTree().then(function (response) {
          self.bedList =response.body.data;
          commonJs.changeBedList(self.bedList);
        })
      },
      //选择团队队员
      choose(val,index){
        if(this.isSave){
          if(this.chooseStaff.length != "0"){
            for(let i=0;i<this.chooseStaff.length;i++){
              if(this.chooseStaff[i].emId == val.emId ){
                this.chooseStaff.splice(i,1);
              }else{
                console.debug("该员工已经被选中过了")
              };
            };
            this.chooseStaff.push(val);
          }else{
            this.chooseStaff.push(val);
          };
        }

      },
      //获取团队所有信息
      getTeamByTeam(val){
        let self = this;
        teamApi.getTeamByTeamId(self.currentTeamId).then(function(response){
          if(val == "1"){
            self.bedTableData  =response.body.data.bedList;
            if(self.bedTableData){
              for(var i=0;i<self.bedTableData.length;i++){
                self.bedTableData[i].dutyPersonString = self.bedTableData[i].dutyPersonName.join(" , ");
              }
            };
          }else{
            self.chooseStaff  =response.body.data.empList;
            self.empList  =response.body.data.empList;
            self.teamQueryResponseDTO  =response.body.data.teamQueryResponseDTO;
            self.submitData.dutyPersonEmpId = response.body.data.teamQueryResponseDTO.dutyPersonEmId;
            self.submitData.tmName = response.body.data.teamQueryResponseDTO.tmName;
            self.submitData.type = response.body.data.teamQueryResponseDTO.type;
            self.submitData.teamDesc =  response.body.data.teamQueryResponseDTO.teamDesc;
            for(var i=0;i<self.chooseStaff.length;i++){
              self.submitData.insertTeamEmpIdList[i] =self.chooseStaff[i].emId;
            };
            self.bedTableData  =response.body.data.bedList;
            if(self.bedTableData){
              for(var i=0;i<self.bedTableData.length;i++){
                self.bedTableData[i].dutyPersonString = self.bedTableData[i].dutyPersonName.join(" , ");
              }
            }
          };
          self.isLeader();
        },function (){})
      },
      //是否是组长
      isLeader(){
        let self = this;
        self.currentDutyPersonEmId = self.teamQueryResponseDTO.dutyPersonEmId;
//        self.teamQueryResponseDTO.dutyPerson =  self.teamQueryResponseDTO.dutyPerson ;
        for(var i=0;i<self.chooseStaff.length;i++){
          (function (j) {
            if(self.chooseStaff[j].emId == self.currentDutyPersonEmId){
              self.chooseStaff[j].role ="负责人";
              self.chooseStaff[j].isRole =true;
            }else {
              self.chooseStaff[j].role ="组员";
              self.chooseStaff[j].isRole = false;
            };
          })(i);
        };
      },
      //删除团队员工
//      delStaff(emId,index){
//        let self = this;
//        self.$confirm('确定从团队中删除该员工及其关联信息', '删除成员', {
//          confirmButtonText: '确定',
//          cancelButtonText: '取消',
//          type: 'warning'
//        }).then(() => {
//          teamApi.editTeamDeleteEmp(emId,self.currentTeamId).then(function () {
//          self.$message({
//            type: 'success',
//            message: '删除成功!'
//          });
//          self.getTeamByTeam();
//        },function (){
//          self.$message({
//            type: 'warning',
//            message: '删除失败!'
//          });
//        });
//      }).catch(() => {
//          self.$message({
//          type: 'info',
//          message: '已取消删除'
//        });
//      });
//      },
      //返回
      back(){
        this.$router.push({name: 'team',params: { no: 5 }});
      },
      //新增或编辑团队及负责人
      editMember(){
        let self = this;
        if(self.submitData.tmName==''){
          self.$message({
            message: '请填写团队名称',
            type: 'warning'
          });
          return false;
        }
        if(self.submitData.type==''||self.submitData.type==null){
          self.$message({
            message: '请选择服务类型',
            type: 'warning'
          });
          return false;
        }
        if(self.chooseStaff.length==0){
          self.$message({
            message: '请选择团队成员',
            type: 'warning'
          });
          return false;
        }
        if(self.submitData.dutyPersonEmpId==''||self.submitData.dutyPersonEmpId==null){
          self.$message({
            message: '请填写负责人',
            type: 'warning'
          });
          return false;
        }
        self.TeamEditTeamAndEmpRequestDTO.newDutyPersonEmId = self.submitData.dutyPersonEmpId;
        self.TeamEditTeamAndEmpRequestDTO.dutyPersonEmpId =  self.submitData.dutyPersonEmpId;
//        self.teamQueryResponseDTO.dutyPerson =  self.submitData.dutyPersonEmpId;
        self.TeamEditTeamAndEmpRequestDTO.tmId =self.currentTeamId;
        self.TeamEditTeamAndEmpRequestDTO.tmName = self.submitData.tmName;
        self.TeamEditTeamAndEmpRequestDTO.type = self.submitData.type;
        self.TeamEditTeamAndEmpRequestDTO.teamDesc = self.submitData.teamDesc;
        for(var i=0;i<self.chooseStaff.length;i++ ){
          (function (j) {
            self.TeamEditTeamAndEmpRequestDTO.insertEmpIdList[j] = self.chooseStaff[j].emId;
            self.TeamEditTeamAndEmpRequestDTO.insertTeamEmpIdList[j] = self.chooseStaff[j].emId;
          })(i);
        };
//        if(self.submitData.dutyPersonEmpId !== "" && self.submitData.tmName !== ""){
//          self.$router.push({name:"addTeamBed",params:{way:this.$route.params.way,teamId:this.currentTeamId}});
//        }else{
//          self.$message({
//            message: '团队名称,团队成员,团队负责人均填写后才能进行',
//            type: 'warning'
//          });
//        }
        if(this.$route.params.way == 1){
          //新增团队
          debugger;
          teamApi.insertTeam(self.TeamEditTeamAndEmpRequestDTO).then(function(respones){
            if(respones.status===200){
              self.$message({
                message: '新增团队成员成功，请分配床位',
                type: 'success'
              });
              self.currentTeamId = respones.body.data.msg;
              self.getTeamByTeam();
              self.isClick = true;
              self.isEditStaff = true;
              self.isSave = false;
              self.isEditTeam = true;
            };
          },function(){});
        }else if(this.$route.params.way == 2){
          //编辑团队
          teamApi.editTeamInfo(self.currentTeamId,self.TeamEditTeamAndEmpRequestDTO).then(function(respones){
            if(respones.status===200){
              self.$message({
                message: '已保存您更新的员工信息',
                type: 'success'
              });
              self.getTeamByTeam();
              self.$router.push({name:'team'});
            }
          },function(){
            self.$message.error('更新的员工信息失败，请重试');
            self.getTeamByTeam();
          });
        };
        this.addStaff = false;
      },
      querySearch(queryString, cb) {
        console.debug(queryString);
        var allStaff = this.allStaff;
        var results = queryString ? allStaff.filter(this.createFilter(queryString)) : allStaff;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (staff) => {
          console.debug(staff.emName);
          console.debug(queryString.toLowerCase());

          return (staff.emName.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      //下一步
      isNextStep(){
        let self = this;
        if(this.$route.params.way==2){//编辑时返回
          self.$router.push({name:"team",params: { no: 5 }});
        }else{//其他
          if(self.submitData.dutyPersonEmpId !== "" && self.submitData.tmName !== ""){
            self.$router.push({name:"addTeamBed",params:{way:this.$route.params.way,teamId:this.currentTeamId}});
          }else{
            self.$message({
              message: '团队名称,团队成员,团队负责人均填写后才能进行下一步',
              type: 'warning'
            });
          }
        };
      },
      //查询床位信息
      queryBedInfo(roomId){
        let self = this;
        teamApi.getAddBedVoByBedId(roomId,self.currentTeamId).then(function (respones) {
          self.bedInfo = respones.body.data;
          console.debug(self.bedInfo);
        },function () {})
      },
      /**
       * 删除负责人
       */
      delStaff(val,index){
        if(this.$route.params.way == 1){//新增
          this.chooseStaff.splice(index,1);
        }else if(this.$route.params.way == 2){//编辑
          if(val.emId==this.submitData.dutyPersonEmpId){
            this.$message({
              message:'不能删除负责人',
              type:'warning'
            });
            return;
          }else{
            this.chooseStaff.splice(index,1);
          }
        }
      },
      //提交新建/修改床位负责人
      submitDutyPerson(){
        let self = this;
        if(self.bedInfo.length > 0){
          for(var k=0;k<self.bedInfo.length;k++){
            self.bedInfo[k].tmId = self.currentTeamId;
            delete self.bedInfo[k].emNames;
          };
        };
        teamApi.editTeamInsertBedInfo(self.bedInfo).then(function () {
          self.getTeamByTeam("1");
          self.modal = false;
          self.addBedDialog = false;
        },function () {
          self.$message({
            type: 'error',
            message: '添加负责人失败!'
          });
        })

//        if(this.$route.params.way == 1){//增加
//          for(var k=0;k<self.bedInfo.length;k++){
//            self.bedInfo[k].tmId = self.currentTeamId;
//          }
//          teamApi.editTeamInsertBedInfo(self.bedInfo).then(function () {
//            self. getTeamByTeam();
//            self.modal = false;
//            self.addBedDialog = false;
//          })
//        }else if(self.$route.params.way == 2){//修改
//              //这里是修改负责提交的结论   后端暂未提供
//          for(var k=0;k<self.bedInfo.length;k++){
//            self.bedInfo[k].tmId = self.currentTeamId;
//          }
//          teamApi.editTeamInsertBedInfo(self.bedInfo).then(function () {
//            self. getTeamByTeam();
//            self.modal = false;
//            self.addBedDialog = false;
//          })
//        };
      },
      //查询床位信息
      queryBedInfo(roomId){
        let self = this;
        teamApi.getAddBedVoByBedId(roomId,self.currentTeamId).then(function (respones) {
          self.bedInfo = respones.body.data;
          console.debug(self.bedInfo);
        },function () {})
      },
      //删除床位
      delBed(bedId){
        let self = this;
        self.$confirm('确定删除该床位信息', '删除床位', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          teamApi.editTeamDeleteBedInfo(bedId,self.currentTeamId).then(function(response){
            if(response.status ==200){
              self.$message({
                type: 'success',
                message: '删除成功!'
              });
              self.getTeamByTeam();
            }
          },function () {
            console.debug("删除床位失败")
          });
        }).catch(() => {
          self.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    },
    watch:{
      staffName:{
        handler(curVal){
          this.getEmpByEmpName(curVal);
        },
        deep:true
      },
      bedPos:{
        handler(curVal){
          let currentRoomId = curVal[curVal.length-1];
          this.queryBedInfo(currentRoomId);
        },
        deep:true
      }
    },
    mounted: function () {
      this.init();
    }
  }
</script>
<style>
  .staff-main .all,.choose{
    border:1px solid #d9d9d9;
    width: 43%;
    padding:10px 10px 0px;
    height: 270px;
  }
  .staff-main .el-form-item__content .teamMember{
    margin-top: -11px;
  }
  .staff-main .all,.staff-main .choose{
    padding: 20px 10px 0px;
    background-color: #EFF2F7;
    -webkit-box-shadow: -1px 1px 3px #cccccc;
    box-shadow: -1px 1px 3px #cccccc;
  }
  .staff-main .choose{
    height: 270px;
    padding: 10px 10px 0px;
  }
  .staff-main .all .allName,.staff-main .choose .Item{
    height: 193px;
    overflow: scroll;
    background-color: #ffffff;
  }
  .staff-main .choose .Item{
    height: 213px;
  }
  .staff-main .choose .chooseName,.staff-main .all .allName .prompt{
    color: #3fc6d2;
    line-height: 34px;
  }
  .staff-main .all .allName .prompt{
    color: #3fc6d2;
    line-height: 30px;
    margin-left: 5px;
  }
  .staff-main .choose .el-icon-close{
    color:#3fc6d2;
    font-size: 12px;
  }
  .staff-main .all .input-item{
    margin-bottom: 8px;
  }
  .staff-main .all .input-item .el-input{
    width: 100%!important;
  }
  .staff-main .all .allName div,.choose .Item div{
    padding:0px 5px;
    cursor: pointer;
    color:#1f2d3d;
  }
  .staff-main .all .allName div:hover{
    background-color: #EFF2F7;
  }
  .staff-main .choose .del-staff{
    float: right;
  }
  .teamName{
    margin-bottom: 10px;
  }
  .staff-main .principal,.teamName{
    width: 45% !important;
  }
  .principal label{
    float: left;
  }
  .principal input{

    float: right;
  }

  .staff-main .title{
    font-size: 28px;
    color: #111111;
    margin: 30px 50px 30px 50px;
    font-weight:bolder;
    padding-left: 15px;
    border-left: 5px solid #0cb7c6;
  }
  .staff-main .btns{
    float: right;
  }
  .staff-main .nameItem{

  }
  .staff-main .nameItem div{

  }
  .staff-main .btns{
    float: right;
  }
  .container .input-item{
    /*margin-bottom: 20px;*/
    margin-top: 15px;
  }
  .container input{
    display: inline-block;
  }
  .btns{
    float: right;
  }
  .teamDetailTitle{
    padding-left:10px;
    padding-right:10px;
    margin-top:40px;
    height:50px;
    line-height:50px;
  }
  .teamDetailTitle label{
    /*font-size:20px;*/
  }
  @media screen and (max-width:1367px){
    .teamDetailInput{
      width:70%!important;
    }
  }
  .item.member{
    text-align:center;
  }
  .addTeamMember .el-select-dropdown{
    z-index: 99999!important;
  }
  .el-autocomplete-suggestion{
    z-index: 99999!important;
  }
  .staff-main .el-dialog .input-item{
    padding-left: 0px!important;
  }
  .staff-main .el-dialog .label{
    margin-bottom:5px;
  }
  .staff-main .el-dialog .teamName{
    margin-bottom: 20px;
  }
  .staff-main .bed{
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%);
    box-shadow:0 1px 3px rgba(0,0,0,0.3);
    background-color:#fff;
    width:1200px;
    height:500px;
    margin-top:-250px;
    border-radius:5px;
    z-index:10;
    overflow: auto;
  }
  .staff-main .bed .item{
    margin-top:10px;
  }
  .staff-main .bed .room-bed{
    width: 1000px;
    margin: 0 auto;
  }
  .staff-main .bed .item .belongRoom,.bed .item.principe{
    margin-right:10px;
    margin-left:100px;
  }
  .staff-main .bed .item.principe{
    margin-top:10px;
    margin-bottom:10px;
  }
  .staff-main .bed .box-card{
    width:310px;
    height:200px;
    display:inline-block;
    margin-right:10px;
    margin-left:10px;
    margin-top:15px;
    color:#000;
  }
  .staff-main .bed .box-card p{
    margin-top:10px;
    text-align: left!important;
  }
  .staff-main .bed .box-card .labelName{
    width:73px;
    display:inline-block;
    text-align:right;
  }
  .staff-main .bed .box-card .name{
    display:inline-block;
    /*width:82px!important;*/
  }
  .staff-main .bed .box-card .el-select{
    width:180px!important;
  }
  .staff-main .bed .saveDisBlock{
    text-align: center;
    position: absolute;
    bottom:15px;
    left: 50%;
    margin-left: -30px;
  }
  .staff-main .bed .saveBlock{
    text-align: center;
    margin-bottom:15px;
  }
  .staff-main .bed .el-cascader .el-input{
    width:100%!important;
  }
</style>
